<template>
  <div>
    <!-- <h1>购物车</h1> -->
    <div>
      <van-swipe-cell v-for="(i, index) in arr" :key="i.id" id="box">
        <div>
          <van-checkbox
            v-model="i.checked"
            shape="square"
            @click="judgeBt"
          ></van-checkbox>
          <img :src="$pre + i.img" />
          <div class="right">
            <h3>{{ i.goodsname }}</h3>
            <span>￥{{ i.price }}</span>
            <van-stepper
              v-model="i.num"
              @plus="addNum(i.id, index)"
              @minus="subNum(i.id, index)"
            />
          </div>
        </div>
        <template #right>
          <van-button
            @click="del(i.id)"
            square
            text="删除"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 结算 -->
    <div id="jiesuan">
      <van-checkbox
        v-model="allChecked"
        shape="square"
        @click="allBt"
      ></van-checkbox>
      <span>合计：{{ allPrice | filterPrice }}</span>
      <button id="btAll" @click="toOrder()">结算</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
      allChecked: false,
      allPrice: 0,
      bool: true,
    };
  },
  methods: {
    // 这是全选按钮事件
    allBt() {
      if (!this.arr) {
        return;
      }
      // console.log("全选按钮");
      this.arr.forEach((item, index) => {
        item.checked = this.allChecked;
      });
      this.allPrice = this.arr.reduce((val, item, index) => {
        return item.checked
          ? val + parseInt(item.num) * parseInt(item.price)
          : val;
      }, 0);
    },

    // 这是所有多选按钮事件
    judgeBt() {
      if (!this.arr) {
        return;
      }
      // console.log("单个多选按钮");
      this.allChecked = this.arr.every((item, index) => {
        return item.checked == true;
      });
      this.allPrice = this.arr.reduce((val, item, index) => {
        return item.checked
          ? val + parseInt(item.num) * parseInt(item.price)
          : val;
      }, 0);
    },

    // 这是加减按钮事件
    addNum(i, j) {
      if (!this.bool) {
        this.arr[j].num--;
        // return;
      } else {
        this.bool = false;
        axios({
          url: "/api/cartedit",
          method: "post",
          data: {
            id: i,
            type: 2,
          },
        }).then((res) => {
          // console.log(res);
          this.bool = true;
        });
      }
    },

    subNum(i, j) {
      if (!this.bool) {
        this.arr[j].num--;
      } else {
        this.bool = false;
        axios({
          url: "/api/cartedit",
          method: "post",
          data: {
            id: i,
            type: 1,
          },
        }).then((res) => {
          // console.log(res);
          this.bool = true;
        });
      }
    },

    // 这是删除
    del(i) {
      axios({
        url: "/api/cartdelete",
        method: "post",
        data: {
          id: i,
        },
      }).then((res) => {
        // console.log(res);
        this.refresh();
      });
    },

    // 刷新
    refresh() {
      // 请求购物车数据
      axios({
        url: "/api/cartlist",
        method: "",
        params: {
          uid: JSON.parse(localStorage.getItem("userInfo")).uid,
        },
        headers: {
          authorization: JSON.parse(localStorage.getItem("userInfo")).token,
        },
      }).then((res) => {
        console.log(res);
        if (!res.data.list) {
          return;
        }
        res.data.list.forEach((item, index) => {
          item.checked = false;
        });
        this.arr = res.data.list;
        // console.log(this.arr);
      });
    },

    // 11.结算
    toOrder() {
      /* countmoney:总价 countnumber：总数量 idstr:购物车id*/
      let json = {
        countmoney: this.allPrice,
        countnumber: this.arr.reduce(
          (val, item) => (item.checked ? val + item.num : val),

          0
        ),
        idstr: this.arr
          .reduce((val, item) => (item.checked ? val + "," + item.id : val), "")
          .slice(1),
      };
      //存起来购物车计算出来的数据
      localStorage.setItem("shopInfo", JSON.stringify(json));
      //跳转订单
      this.$router.push("/orders");
    },
  },

  mounted() {
    this.refresh();
  },
};
</script>

<style scoped>
#box {
  width: 95vw;
  height: 3rem;
  background-color: rgb(248, 243, 243);
  margin: 0.2rem auto;
}
img {
  width: 2rem;
  height: 2rem;
  float: left;
  margin-left: 0.5rem;
}
.right {
  float: left;
}
#jiesuan {
  position: fixed;
  bottom: 1rem;
  left: 0;
  width: 95vw;
  height: 1rem;
  background-color: white;
  display: flex;
  padding-left: 5vw;
}
#jiesuan span {
  flex: 1;
  text-align: center;
  line-height: 1rem;
  font-size: 0.45rem;
  color: #ff7f50;
}
#btAll {
  height: 100%;
  background-color: #ff7f50;
  color: white;
  border: none;
  width: 2rem;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 3rem;
}
</style>